<template>

    <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
        <a-row>
            <a-col :span="4">
                <a-form-item has-feedback label="账号" name="username">
                    <a-input allowClear v-model:value="formState.username" />
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item has-feedback label="关联员工" name="emp_id">
                    <a-select allowClear v-model:value="formState.emp_id">
                        <a-select-option :value="item.emp_id" v-for="item in queryEmpList" :key="item.emp_id">{{
                            item.emp_name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">查询</a-button>
                    <!-- <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button> -->
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <a-flex justify="flex-end">
                    <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button>
                </a-flex>
            </a-col>
        </a-row>
    </a-form>


    <a-row>
        <a-col :span="24">
            <a-table size="small" style="width: 100%;" :columns="columns" :data-source="data">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'name'">
                        <a>{{ text }}</a>
                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a @click="handleEdit(record)">编辑</a>
                        <a @click="handleDelete(record)">删除</a>
                    </template>
                </template>
            </a-table>
        </a-col>
    </a-row>

    <a-row>
        <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" style="color: red"
            :title="isAdd ? '新增' : '编辑'" placement="right">
            <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState"
                v-bind="layout" @finish="isAdd ? handleAddFinish($event) : handleEditFinish($event)">

                <a-form-item :validateFirst="true" has-feedback label="账号" name="username">
                    <a-input :disabled="!isAdd" v-model:value="addFormState.username" />
                </a-form-item>

                <a-form-item has-feedback label="角色" name="role_id">
                    <a-select v-model:value="addFormState.role_id">
                        <a-select-option :value="item.key" v-for="item in roleList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="关联员工" name="emp_id">
                    <a-select v-model:value="addFormState.emp_id">
                        <a-select-option :value="item.key" v-for="item in employeeList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="密码" name="password">
                    <a-input v-model:value="addFormState.password" />
                </a-form-item>

                <a-form-item has-feedback label="是否启用" name="is_active">
                    <a-select v-model:value="addFormState.is_active">
                        <a-select-option :value="item.key"
                            v-for="item in [{ key: '是', name: '是' }, { key: '否', name: '否' }]" :key="item.key">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>


                <a-form-item has-feedback>
                    <a-col :span="24">
                        <a-flex justify="flex-end">
                            <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
                        </a-flex>
                    </a-col>
                </a-form-item>
            </a-form>
        </a-drawer>
    </a-row>
</template>
<script setup>
import { reactive, ref } from 'vue';
import service from '@/api/modulesApi/user';
import { message } from 'ant-design-vue';
// 角色
const roleList = ref([]);
const getRole = async () => {
    const res = await service.getRole()
    roleList.value = res.data
}
getRole()

// 员工
const employeeList = ref([]);
const getEmployee = async () => {
    const res = await service.getEmployee()
    employeeList.value = res.data
}
getEmployee()

// 获取查询项关联员工
const queryEmpList = ref([]);
const getQueryEmp = async () => {
    const res = await service.getQueryEmp()
    queryEmpList.value = res.data
}
getQueryEmp()

const columns = [
    {
        title: '账号',
        dataIndex: 'username',
        key: 'username',
    },
    {
        title: '角色',
        dataIndex: 'role_id',
        key: 'role_id',
        customRender: ({ text, record }) => {
            return record.role_name;
        },
    },
    {
        title: '关联员工',
        dataIndex: 'emp_id',
        key: 'emp_id',
        customRender: ({ text, record }) => {
            return record.emp_name;
        },
    },

    {
        title: '是否启用',
        dataIndex: 'is_active',
        key: 'is_active',
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },
];
const data = ref([]);

const formRef = ref();
const formState = reactive({
    username: '',
    emp_id: '',
});

const isAdd = ref(false);

const open = ref(false);

const addFormState = reactive({
    username: '',
    role_id: '',
    emp_id: '',
    password: '',
    is_active: '',
});

const addFormRef = ref();

const addRulesForm = {
    username: [
        {
            required: true, message: '请输入账号',
            trigger: 'blur'
        },
        {
            validator: async (rule, value, callback) => {
                const res = await service.checkUsername({ username: value, isAdd: isAdd.value })
                if (!res.success) {
                    return Promise.reject(res.message);
                } else {
                    return Promise.resolve(res.message);
                }
            },
            trigger: 'blur'
        }
    ],
    role_id: [{ required: true, message: '请选择角色' }],
    emp_id: [{ required: true, message: '请选择关联员工' }],
    password: [{ required: true, message: '请输入密码' }],
    is_active: [{ required: true, message: '请选择是否启用' }],
};

const handleAdd = () => {
    isAdd.value = true;
    addFormState.username = '';
    addFormState.role_id = '';
    addFormState.emp_id = '';
    addFormState.password = '';
    addFormState.is_active = '';
    open.value = true;
};

const handleEdit = (record) => {
    isAdd.value = false;
    open.value = true;
    addFormState.username = record.username;
    addFormState.role_id = record.role_id;
    addFormState.emp_id = record.emp_id;
    addFormState.password = record.password;
    addFormState.is_active = record.is_active;
}

const handleDelete = async (record) => {
    const res = await service.deleteUser({ username: record.username })
    if (res.success) {
        message.success('删除成功')
        getUser()
    } else {
        message.error(res.message)
    }
}

const handleAddFinish = async (values) => {
    const res = await service.addUser(values)
    message.success('新增成功')
    getUser()
    open.value = false;
};

const handleEditFinish = async (values) => {
    const res = await service.editUser(values)
    message.success('编辑成功')
    getUser()
    open.value = false;
}

const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 14 },
};

const handleFinish = async (values) => {
    await getUser()
};

const getUser = async () => {
    const res = await service.getUser(formState)
    data.value = res.data
}

getUser()
</script>